<template>
  <cml-module :moduleName="$t('cmlpanel.i18n')"
    icon="guojihua"
    v-bind="$attrs">
    <cml-module-item v-if='$_auth.includes("langI18n")' :title="$t('cmlpanel.lang')">
      <a-select size="small"
        :value="lang"
        :options="langOption"
        style="width: 120px"
        @change="langTypeChange">
      </a-select>
    </cml-module-item>
    <!-- 更多功能就放在这里 -->
  </cml-module>
</template>
<script>
import { Select } from 'ant-design-vue'
import CmlModule from '../cml-module'
import CmlModuleItem from '../cml-module-item'
import * as anov from 'anov-core'

export default {
  name: 'LangI18n',
  inheritAttrs: false,
  components: {
    ASelect: Select,
    CmlModule,
    CmlModuleItem
  },
  model: {},
  props: {},
  data() {
    return {
      value: 'LangI18n'
    }
  },
  computed: {
    ...anov.languageServer.mapState(['lang', 'langOption'])
  },
  watch: {
    lang: {
      handler: function(val) {
        this.i18nChange(val)
      },
      immediate: true
    }
  },
  created() {},
  mounted() {},
  beforeDestroy() {},
  methods: {
    langTypeChange(value) {
      anov.languageServer.setLang(value)
    },
    i18nChange(value) {
      if(this.$i18n.locale==value)return
      this.$i18n.locale = value
      let msg='语言种类切换为:'+this.langOption.find(lan=>lan.value==value).label
      anov.voiceFeedbackServer.speak(msg)
      app.msg({type: 'info', content: msg})
    }
  }
}
</script>
<style lang="scss" scoped></style>
